<template>
    <div>
        <div class="top">
            <h4 class="totla-score">总体评分</h4>
            <div class="score">
                <span>{{ orderInfo.totalScore * 2 || totalScore }}</span
                >分
            </div>
            <div class="smile-box">
                <img
                    :src="require(`../../assets/images/wuliu/${item}.png`)"
                    v-for="(item, index) in totalFace"
                    :key="index"
                    @click="$route.query.status ? changeTotalScore(index) : ''"
                />
            </div>
            <div class="star-box">
                <div class="title">店铺评分</div>
                <div class="content">
                    <Star
                        :ifSuccess="status"
                        title="店铺评分"
                        :flag="$route.query.status"
                        :score="$route.query.status ? shop : orderInfo.shop"
                        @changeStar="changeStar1"
                    ></Star>
                    <Star
                        :ifSuccess="status"
                        title="物流速度"
                        :flag="$route.query.status"
                        :score="$route.query.status ? logistics : orderInfo.logistics"
                        @changeStar="changeStar2"
                    ></Star>
                    <Star
                        :ifSuccess="status"
                        title="快递评分"
                        :flag="$route.query.status"
                        :score="$route.query.status ? express : orderInfo.express"
                        @changeStar="changeStar3"
                    ></Star>
                </div>
            </div>
        </div>
        <div class="evaluate-box">
            <textarea
                class="evaluate"
                cols="30"
                rows="10"
                :placeholder="!$route.query.status ? '此用户未书写评价' : '写几句评价'"
                v-model="info"
                :readonly="!$route.query.status"
            ></textarea>
            <div class="img-box">
                <div v-if="!$route.query.status" class="content">
                    <img v-for="(item, index) in orderInfo.imgs" :key="index" :src="item" />
                </div>
                <div v-else class="content">
                    <div class="img-item" v-for="(item, index) in imgList" :key="index">
                        <img src="../../assets/images/wuliu/delete.png" class="del-btn" @click="delImg(index)" />
                        <p>{{ index + 1 }}</p>
                    </div>
                    <div class="add-img" @click="addImg" v-show="imgList.length < 5">
                        <img src="../../assets/images/wuliu/xiangji.png" />
                        <span>{{ imgList.length }} / 5</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="submit-btn" v-if="$route.query.status" @click="submit()">提交</div>
    </div>
</template>

<script>
import { WuLiuDetailApi, SubmitApi } from '@/request/api';
import Star from '@/components/ScoringTemp';

export default {
    data() {
        return {
            orderInfo: {},
            status: false,
            imgList: [1, 2, 3],
            shop: 5,
            logistics: 5,
            express: 5,
            totalScore: 10,
            totalFace: ['shangxin', 'shangxin', 'shangxin', 'shangxin', 'shangxin'],
            info: '',
            flag: false,
        };
    },
    created() {
        this.changeTotalScore(4);
    },
    methods: {
        addImg() {
            this.imgList.push(this.imgList.length);
        },
        delImg(index) {
            this.imgList.splice(index, 1);
        },
        changeTotalScore(index) {
            this.totalFace = this.totalFace.map((el) => {
                return 'shangxin';
            });
            for (let i = 0; i <= index; i++) {
                this.totalFace[i] = 'xiaolian';
            }
            this.totalScore = (index + 1) * 2;
        },
        changeStar1(score) {
            this.shop = score;
        },
        changeStar2(score) {
            this.logistics = score;
        },
        changeStar3(score) {
            this.express = score;
        },
        submit() {
            SubmitApi({
                shop: this.shop,
                logistics: this.logistics,
                express: this.express,
                totalScore: this.totalScore,
                orderCode: this.orderInfo.orderCode,
                id: this.orderInfo.id,
                info: this.info,
            }).then(() => {
                this.flag = true;
                this.$router.go(-1);
            });
        },
    },
    beforeRouteLeave(to, from, next) {
        to.meta.refresh = this.flag;
        next();
    },
    activated() {
        this.flag = false;
        let tempId = this.$route.params.id;
        if (localStorage.getItem('detId')) {
            if (tempId !== localStorage.getItem('detId')) {
                WuLiuDetailApi({
                    id: this.$route.params.id,
                }).then((res) => {
                    this.orderInfo = res.data;
                    if (this.$route.query.status !== 'write') {
                        this.status = true;
                        this.info = this.orderInfo.info ? this.orderInfo.info : '';
                        this.orderInfo.totalScore ? this.changeTotalScore(this.orderInfo.totalScore - 1) : '';
                    }
                });
                if (this.$route.query.status === 'write') {
                    this.orderInfo.totalScore = null;
                    this.totalScore = 10;
                    this.shop = 5;
                    this.logistics = 5;
                    this.express = 5;
                    this.info = '';
                    this.status = true;
                    this.changeTotalScore(4);
                }
                localStorage.setItem('detId', tempId);
            }
        } else {
            console.log(123);
            WuLiuDetailApi({
                id: this.$route.params.id,
            }).then((res) => {
                this.orderInfo = res.data;
                this.status = true;
                this.info = this.orderInfo.info ? this.orderInfo.info : '';
                this.orderInfo.totalScore ? this.changeTotalScore(this.orderInfo.totalScore - 1) : '';
            });
            localStorage.setItem('detId', tempId);
        }
    },
    deactivated() {
        this.status = false;
    },
    components: {
        Star,
    },
};
</script>

<style lang="less" scoped>
.top {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.3rem;
    box-sizing: border-box;
    .totla-score {
        line-height: 0.86rem;
        color: #aaaaaa;
        font-size: 0.3rem;
    }
    .score {
        color: #ffb601;
        span {
            font-size: 0.66rem;
            margin-right: 0.18rem;
        }
    }
    .smile-box {
        display: flex;
        justify-content: center;
        width: 100%;
        img {
            width: 0.7rem;
            height: 0.7rem;
            margin: 0.3rem 0.275rem 0;
        }
        padding-bottom: 0.3rem;
        border-bottom: 0.01rem solid #dddddd;
    }
    .star-box {
        width: 100%;
        padding-bottom: 0.3rem;
        .title {
            padding: 0.4rem 0.3rem;
        }
    }
}
.evaluate-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 8.1rem);
    background-color: #fff;
    padding: 0.32rem;
    box-sizing: border-box;
    overflow: hidden;
    .evaluate {
        width: 100%;
        height: 50%;
        box-sizing: border-box;
        resize: none;
        outline: none;
        border: none;
    }
    .img-box {
        position: absolute;
        bottom: 0;
        left: 0;
        width: calc(100% - 0.64rem);
        margin: 0 0.32rem 0.32rem;
        box-sizing: border-box;
        overflow-x: auto;
        .content {
            display: flex;
            & > img {
                display: block;
                width: 1.8rem;
                height: 1.8rem;
                margin-right: 0.2rem;
                border-radius: 0.2rem;
            }
            .img-item,
            .add-img {
                min-width: 1.8rem;
                width: 1.8rem;
                height: 1.8rem;
                border-radius: 0.2rem;
                box-sizing: border-box;
            }
            .img-item {
                background-color: skyblue;
                margin-right: 0.2rem;
                position: relative;
                .del-btn {
                    width: 0.38rem;
                    height: 0.38rem;
                    position: absolute;
                    right: 0.1rem;
                    top: 0.1rem;
                }
                p {
                    text-align: center;
                    line-height: 1.8rem;
                    font-size: 0.8rem;
                    color: #fff;
                }
            }
            .add-img {
                border: 1px dashed #e5e5e5;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                img {
                    width: 0.77rem;
                    margin-bottom: 0.2rem;
                }
                span {
                    color: #dddddd;
                }
            }
        }
    }
}
.submit-btn {
    position: absolute;
    right: 0.2rem;
    top: -0.52rem;
    z-index: 99999;
    color: #fff;
}
</style>
